<template>
  <div>
    <Navbar></Navbar>
    <!-- buttons -->
    <div class="btns" v-if="pageStatus === PageStatus.success">
      <van-button type="success">全部</van-button>
      <van-button type="success">精华</van-button>
      <van-button type="success">分享</van-button>
    </div>

    <!-- loading -->
    <van-loading
      class="loading"
      color="#0094ff"
      v-if="pageStatus === PageStatus.loading"
    />

    <!-- pull to refresh -->
    <van-pull-refresh
      v-model="isLoading"
      :head-height="80"
      @refresh="onRefresh"
    >
      <!-- 下拉提示，通过 scale 实现一个缩放效果 -->
      <template #pulling="props">
        <img
          class="doge"
          src="https://fastly.jsdelivr.net/npm/@vant/assets/doge.png"
          :style="{ transform: `scale(${props.distance / 80})` }"
        />
      </template>

      <!-- 释放提示 -->
      <template #loosing>
        <img
          class="doge"
          src="https://fastly.jsdelivr.net/npm/@vant/assets/doge.png"
        />
      </template>

      <!-- 加载提示 -->
      <template #loading>
        <img
          class="doge"
          src="https://fastly.jsdelivr.net/npm/@vant/assets/doge-fire.jpeg"
        />
      </template>
      <!-- 留言列表 -->
      <div v-if="pageStatus === PageStatus.success">
        <van-cell v-for="item in messageList" :key="item.id" @click="gotoMsgDetail(item.id)">
          <template #title>
            <div class="title">{{ item.title.substring(0, 10) + "..." }}</div>
          </template>
          <template #icon>
            <van-image width="30" height="30" :src="item.imgurl"></van-image>
          </template>
          <template #value>
            <span>{{ item.createTime.substring(0, 10) }}</span>
          </template>
        </van-cell>
      </div>
    </van-pull-refresh>

    <Tabbar :badgeCount="messageCount"></Tabbar>
  </div>
</template>

<script setup>
import { ref } from "vue";
import axios from "axios";
import { onMounted } from "vue";
import Navbar from "@/components/Navbar.vue";
import Tabbar from "@/components/Tabbar.vue";
import { PageStatus } from "@/utils/utils";
import { useRouter } from "vue-router";

const messageList = ref([]);
const pageStatus = ref(PageStatus.loading);
const isLoading = ref(true);
const messageCount= ref(null);
const router = useRouter();

function gotoMsgDetail(id) {
  router.push(
    {
      path: "/messagedetail/" + id,
    }
  );
}
function onRefresh() {
  messageList.value = [];
  getMessage();
}
function getMessage() {
  axios
    .get("https://cnodejs.org/api/v1/topics")
    .then((result) => {
      // console.log(result.data.data);
      result.data.data.forEach((item) => {
        messageList.value.push({
          title: item.title,
          author: item.author.loginname,
          replyCount: item.reply_count,
          visitCount: item.visit_count,
          createTime: item.create_at,
          id: item.id,
          imgurl: item.author.avatar_url,
        });
      });
      // console.log(messageList.value);
      messageList.value.sort((a, b) => {
        return new Date(b.createTime) - new Date(a.createTime);
      });
      pageStatus.value = PageStatus.success;
      isLoading.value = false;
      messageCount.value = messageList.value.length;
    })
    .catch((err) => {
      console.log(err);
    });
}

onMounted(() => {
  getMessage();
});
</script>

<style scoped>
.btns {
  display: flex;
  justify-content: space-around;
  margin: 10px 0;
}
.title {
  margin-left: 10px;
  color: blue;
  font-size: 18px;
  line-height: 30px;
}
.loading {
  height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.doge {
  width: 140px;
  height: 72px;
  margin-top: 8px;
  border-radius: 4px;
}
</style>